<template>
  <view>
    <!--  {{page}} -->
    <view class="notice" v-for="d in list" @click="showDetail(d.bid)">

      <view class="title">
        {{ d.title }}
      </view>

      <view class="info">
        {{ d.username}} {{ tools.formatDate(d.lastupdate) }}
      </view>

    </view>

    <uni-load-more @clickLoadMore="loadmore" :content-text="loadContext" :status="status"></uni-load-more>

  </view>
</template>

<script setup>
  import {
    ref
  } from 'vue'
  import {
    api,
    tools
  } from '../../api/api.js'

  import {
    onLoad,
    onPullDownRefresh
  } from '@dcloudio/uni-app'

  onLoad(() => {
    uni.startPullDownRefresh({})
  })

  onPullDownRefresh(() => {
    page.value.pageNumber = 1
    query()
  })

  // more/loading/noMore
  const status = ref('more')

  const loadmore = () => {
    page.value.pageNumber++
    if (page.value.pageNumber >= page.value.pageCount) {
      status.value = 'noMore'
      return
    }
    status.value = 'loading'
    api.get(
      '/crud/billboard',
      tools.concatJson(queryInfo.value, page.value),
      (data) => {
        status.value = 'more'
        if (data.success) {
          list.value = list.value.concat(data.data.data)
          page.value = data.data.pageBean

          if (page.value.pageNumber >= page.value.pageCount) {
            status.value = 'noMore'
          }
          return
        }
        uni.showToast({
          title: data.message,
          icon: 'fail'
        })

      }
    )



  }

  const loadContext = ref({
    contentdown: "点击加载更多",
    contentrefresh: "正在加载...",
    contentnomore: "我是有底线的"
  })

  const queryInfo = ref({
    title: '',
    content: '',
    username: ''
  })

  const page = ref({
    pageNumber: 1,
    pageSize: 5
  })

  const list = ref([])

  const showDetail = (bid) => {
    uni.navigateTo({
      url: '/pages/notice/detail?bid=' + bid
    })
  }

  const query = () => {
    api.get(
      '/crud/billboard',
      tools.concatJson(queryInfo.value, page.value),
      (data) => {
        uni.stopPullDownRefresh()

        if (data.success) {
          list.value = data.data.data
          page.value = data.data.pageBean
          return
        }
        uni.showToast({
          title: data.message,
          icon: 'fail'
        })

      }
    )
  }
</script>

<style scoped>
  .notice {
    border: 1px solid #dcdcdc;
    border-radius: 0.5rem;
    margin: 0.5rem;
    padding: 0.5rem;
  }

  .notice .title {
    font-size: 1.3rem;
    font-weight: bold;
    color: #0000ff;
  }

  .notice .info {
    text-align: right;
  }
</style>